<template>
	<view class="page">
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in res" :key="index" v-if="item.is_top">
				<view class="uni-media-list" @tap="jump(item.id)">
					<view class="title">
						<image class="logo" src="../../static/img/news/zhiding.png"></image>
						<text>{{ item.title }}</text>
					</view>
					<view class="texts">
						<text>{{ item.member_name}}</text>
						<text>{{ item.comment }}条评论</text>
						<text>{{ item.create_time_text }}</text>
					</view>
				</view>
				<view class="uni-img">
					<image :src="item.thumburl"></image>
				</view>
			</view>
		</view>
		<image src="../../static/img/news/xuanchuan.png" class="img"></image>
		<view class="uni-list">
			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in res" :key="index" v-if="!item.is_top">    
				<view class="uni-media-list" @tap="jump(item.id)">
					<view class="title">
						<text>{{ item.title }}</text>
					</view>
					<view class="texts">
						<text>{{ item.member_name}}</text>
						<text>{{ item.comment }}条评论</text>
						<text>{{ item.create_time_text }}</text>
					</view>
				</view>
				<view class="uni-img">
					<image :src="item.thumburl"></image>  
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: ["res"],
		data() {
			return {
				
			}
		},
		methods: {
			jump(id) {
				uni.navigateTo({
					url: 'particulars?id=' + id
				});
			}
		}
	}
</script>

<style lang="scss"> 
	page {
		margin-top:100upx;
		background:#f5f6f7;
		.uni-list {
			margin: 30upx 30upx 30upx 30upx;
			background-color: #ffffff;
			height: auto;
			.uni-list-cell {
				padding: 15upx 15upx 15upx 15upx;
				;
				width: 690upx;
				height: 160upx;
				border-bottom: 1px solid #f5f6f7;

				.uni-media-list {
					float: left;
					width: 430upx;

					.title {
						height: 88upx;
						color: #282828;
						margin-bottom: 45upx;
						font-size: 32upx;
						display: -webkit-box;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;

						.logo {
							width: 73upx;
							height: 32upx;
							padding-right: 10upx;
							position: relative;
							top: 4upx;

						}
					}

					.texts {
						color: #989898;
						font-size: 24upx;

						text {
							padding-right: 60upx;
						}
					}
				}

				.uni-img {
					float: left;

					image {
						width: 233upx;
						height: 150upx;
					}
				}
			}
		}

		.img {
			width: 690upx;
			height: 180upx;
			margin: 0upx 30upx 0upx 30upx;
		}
	}
</style>
